02 Resumo

Cada módulo do nosso bundle é envolvido por um wrapper, que resumidamente se trata de uma função. Contudo, a existência desses wrappers tornam a execução do script um pouco mais lenta no navegador .

Entretanto, a partir do Webpack 3, podemos ativar o Scope Hoisting. Ele consiste em concatenar o escopo de todos os módulos em um único wrapper, permitindo assim que nosso código seja executado mais rapidamente no navegador.

Vamos ativar esse recurso apenas no build de produção, adicionando uma instância de ModuleConcatenationPlugin em nossa lista de plugins:

// client/webpack.config.js

// código anterior omitido 

if (process.env.NODE_ENV == 'production') {

    // ATIVANDO O SCOPE HOISTING

    plugins.push(new webpack.optimize.ModuleConcatenationPlugin());

    plugins.push(new babiliPlugin());

    plugins.push(new optimizeCSSAssetsPlugin({
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { 
            discardComments: {
                removeAll: true 
            }
        },
        canPrint: true
    }));
}
// código posterior omitido

Isso já é suficiente. Contudo, devido à dimensão reduzida da nossa aplicação, teremos dificuldade de ver na prática as mudanças no tempo de execução da nossa aplicação.